
// 标题
.van-nav-bar {
  background-color: transparent !important;
  .van-icon:before {
    color: white !important;
    font-size: 36rpx !important;
  }
}
.van-nav-bar__text {
  margin-left: -12rpx !important;
  color: black !important;
  font-size: 48rpx !important;
  line-height: 48rpx !important;
  background-color: transparent !important;
}

.van-grid {
  background-color: white !important;
}


.page {
  position: relative;
  background-color: rgba(255,255,255,1);
  overflow: scroll;
}
.main {
  position: relative;
  width: 100%;

  .user-region {
    position: relative;
    width: 100%;

    padding-top: 192rpx;

    .user-info {
      position: relative;

      padding-left: 36rpx;
      padding-right: 36rpx;

      .user-base {
        display: flex;
        flex-direction: row;
        align-content: flex-start;

        .avatar {
          position: relative;

          width: 96rpx;
          height: 96rpx;

          border: white 8rpx solid;
          border-radius: 50%;

          overflow: hidden;

          image {
            position: absolute;
            left: 0; top: 0;
            width: 96rpx;
            height: 96rpx;
          }

          .avatar-tips {
            position: absolute;

            width: 96rpx;
            height: 96rpx;

            background-color: rgba(0,0,0,0.5);
            color: white;

            font-size: 20rpx;
            text-align: center;
            line-height: 96rpx;
          }
        }

        .name-cert-phone {
          display: flex;
          flex-direction: column;
          align-content: center;

          margin-left: 32rpx;

          .name-cert {
            display: flex;
            flex-direction: row;
            align-content: flex-start;

            .name {
              margin-right: 20rpx;

              font-size: 42rpx;
              font-weight: 500;
              color: var(--font-color);
            }
            .cert {
              position: relative;

              margin-top: 8rpx;
              width: 128rpx;

              .cert-name {
                font-size: 20rpx;
                font-weight: 500;
                color: #FFFFFF;

                position: absolute;
                display: block;
                width: 108rpx;
                height: 100%;
                left: 0; top: 0;
                line-height: 200%;

                text-align: center;
              }
            }
          }

          .phone {
            font-size: 14px;
            font-weight: 400;
            color: var(--grey-color);
            line-height: 20px;
            text-align: center;

            margin-top: 12rpx;
          }
        }

        .setting {
          position: absolute;
          right: 32rpx;
          top: 8rpx;
          width: 48rpx;
          height: 48rpx;
        }
      }
      .user-stat {
        display: flex;

        margin: 24rpx auto;
        flex-direction: row;

        .info {
          display: flex;

          width: 50%;

          flex-direction: column;
          justify-content: center;
          align-items: center;

          .value {
            font-size: 42rpx;
            font-weight: bold;
            color: var(--font-color);

            margin-bottom: 8rpx;
          }
          .label {
            font-size: 20rpx;
            color: var(--grey-color);
          }
        }
      }
    }
    .priv-info {
      position: relative;

      height: 108rpx;

      margin-right: 32rpx; margin-left: 32rpx;

      .tips {
        position: absolute;
        display: flex;

        flex-direction: row;
        justify-content: center;
        align-items: center;

        height: 42rpx;

        left: 24rpx; top: 36rpx;

        color : white;

        image {
          width: 42rpx;
          height: 100%;
          margin-right: 12rpx;
        }
      }

      .button {
        position: absolute;

        top: 32rpx;
        right: 32rpx;
        padding: 8rpx;
        width: 160rpx;
        height: 36rpx;

        color: #1577FF;
        font-size: 20rpx;
        line-height: 36rpx;

        text-align: center;

        background-color: white;
        border-radius: 26rpx;
      }

    }
  }

  .menu-region {

    .menu-grid {
      .menu-item {
        display: flex;

        flex-direction: column;
        justify-content: center;
        align-items: center;

        width: 192rpx;
        height: fit-content;

        background-color: transparent;

        image {
          width: 56rpx;
          height: 56rpx;
          margin-bottom: 20rpx;
        }

        .menu-label {
          flex: 12;
          color: var(--fontColor);
          font-size: 24rpx;
          //font-weight: bold;
        }
      }
    }

    .menu-list {
      .menu-item {
        display: flex;

        flex-direction: row;
        align-items: center;

        height: 72rpx;

        image {
          width: 36rpx;
          height: 36rpx;

          margin-left: 24rpx;
          margin-right: 20rpx;
        }

        .menu-label {
          position: relative;

          bottom: 2rpx;

          color: var(--fontColor);
          font-size: 32rpx;
        }
      }
    }

  }
}

.fill-background {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0; top: 0;
}

.proto-popup {
  .popup-title {
    //height: 50rpx;
    text-align: center;
    font-size: larger;
    font-weight: bold;
    margin-top: 2%;
    margin-left: auto;
    margin-right: auto;
  }
  .popup-text {
    //position: absolute;
    // top: 120rpx; bottom: 144rpx;
    // left: 24rpx; right: 16rpx;
    width: 90%; height: 80%;
    margin-left: 8%; margin-right: 2%;
    margin-top: 3.5%;
    white-space: pre-line;
    text-align: left;
  }
  .popup-but{
   // position: absolute;
   // bottom: 24rpx;
   // left: 25%;
    width: 50%;
    margin-top: 5%;
    margin-left: 25%;
    background-color: #397CFD;
  }
}



